<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>轨迹回放</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        html,
        body,
        #container {
            height: 100%;
            width: 100%;
        }

        .input-card .btn {
            margin-right: 1.2rem;
            width: 9rem;
        }

        .input-card .btn:last-child {
            margin-right: 0;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <div class="input-card">
        <h4>位置轨迹回放</h4>
        <div class="input-item">
            <input type="button" class="btn" value="回放轨迹" id="start" onclick="startAnimation()" />
            <input type="button" class="btn" value="暂停轨迹" id="pause" onclick="pauseAnimation()" />
        </div>
        <div class="input-item">
            <input type="button" class="btn" value="继续轨迹" id="resume" onclick="resumeAnimation()" />
            <input type="button" class="btn" value="停止轨迹" id="stop" onclick="stopAnimation()" />
        </div>
    </div>
    <?php
    require_once 'mysql.php';
    require_once 'check.php';  //导入key检测函数
    class check extends Check_key
    {
        public function check_key()
        {
            return parent::check_key();
        }
    }
    class pathinfo extends MySQL
    {
        # 连接Mysql数据库
        function connect()
        {
            $conn = parent::connect();
            return $conn;
        }

        # 转换坐标
        public function trans_gis($longitude_latitude)
        {
            $longitude_latitude = parent::trans_gis($longitude_latitude);
            return $longitude_latitude;
        }

        #坐标格式化为web段格式
        public function format_web($Str_longitude_latitude)
        {
            $arr = explode(";", $Str_longitude_latitude);
            foreach ($arr as $key => $value) {
                $arr[$key] = '[' . $value . ']';
            }
            $result = implode(",", $arr);
            return $result;
        }

        #查询今日数据
        function get_today_data($ID)
        {
            //定义初始量
            $conn = $this->connect();
            $table = $ID . '_location';
            //$today = date("Y-m-d");
            //测试账户固定日期
            $today="2023-11-13";
            // 执行查询的代码
            $sql = "SELECT * FROM $table WHERE date LIKE '$today%' ORDER BY date;";
            $result = $conn->query($sql);
            //判别记录条数
            if ($result->num_rows > 0) {
                //初始化变量
                $Str_Longitude_Latitude = "";
                $index = 0;
                $sum_Str = "";
                //迭代记录数
                while ($row = $result->fetch_assoc()) {
                    //字段取值
                    $Longitude = $row['Longitude'];
                    $Latitude = $row['Latitude'];
                    //迭代进行坐标转换，一次最多支持40个坐标点
                    if ($index < 40) {
                        //echo '<40';
                        $Str_Longitude_Latitude = $Str_Longitude_Latitude . $Longitude . ',' . $Latitude . '|';
                        $index++;
                    } else {
                        //定义初始值变量为空
                        $index = 0;
                        $Str_Longitude_Latitude = "";
                        //提交一次坐标转换
                        $Str_Longitude_Latitude = substr($Str_Longitude_Latitude, 0, strlen($Str_Longitude_Latitude) - 1);
                        $Str = $this->trans_gis($Str_Longitude_Latitude);
                        //拼接为已转换字符串
                        $sum_Str = $sum_Str . $Str;
                    }
                    // //组合元素格式
                    // $Longitude_Latitude = '[' . $Longitude . ',' . $Latitude . ']';
                    // array_push($location_list, $Longitude_Latitude); // 将每次迭代的结果添加到数组中
                }
                //去除最后一个|
                $Str_Longitude_Latitude = substr($Str_Longitude_Latitude, 0, strlen($Str_Longitude_Latitude) - 1);
                //进行坐标转换
                $Str = $this->trans_gis($Str_Longitude_Latitude);
                //已转换和为转换拼接
                $sum_Str = $sum_Str . $Str;
                //格式化为web段格式
                $Str = $this->format_web($Str);
                //返回web序列
                echo 'var marker, lineArr = [' . $Str . '];';
                //截取初始坐标作为地图中心点
                preg_match('/\[(.*?)\]/', $Str, $matches);
                //返回中心点
                return $matches[1];
            } else { //无记录时自动设置中心区域，应该为注册所在城市地
                //array_push($location_list, '[106.52125825499999, 29.349585984999997]');
                $default = '106.52125825499999,29.349585984999997';
                return $default;
            }
            $conn->close();
        }
    }
    $check = new check();
    $ID = $check->check_key(); //如果key存在且正确，返回用户ID，否则会返回false
    if ($ID != false) {
        echo <<<EOF
        <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=e2043f0ab803f1d78e8372ee124630c9"></script>
        <script>
EOF;
        $db = new pathinfo();
        $center = $db->get_today_data($ID);
        //js
        echo <<<EOF
            var map = new AMap.Map("container", {
                resizeEnable: true,
                center: [$center],
                zoom: 25
            });
    
            marker = new AMap.Marker({
                map: map,
                position: [$center],
                icon: "../images/track_ico.png",
                offset: new AMap.Pixel(-26, -13),
                autoRotation: true,
                angle: 0,
            });
    
            // 绘制轨迹
            var polyline = new AMap.Polyline({
                map: map,
                path: lineArr,
                showDir: true,
                strokeColor: "#28F", //线颜色
                // strokeOpacity: 1,     //线透明度
                strokeWeight: 6, //线宽
                // strokeStyle: "solid"  //线样式
            });
    
            var passedPolyline = new AMap.Polyline({
                map: map,
                // path: lineArr,
                strokeColor: "#AF5", //线颜色
                // strokeOpacity: 1,     //线透明度
                strokeWeight: 6, //线宽
                // strokeStyle: "solid"  //线样式
            });
    
    
            marker.on('moving', function(e) {
                passedPolyline.setPath(e.passedPath);
            });
    
            map.setFitView();
    
            function startAnimation() {
                marker.moveAlong(lineArr, 200);
            }
    
            function pauseAnimation() {
                marker.pauseMove();
            }
    
            function resumeAnimation() {
                marker.resumeMove();
            }
    
            function stopAnimation() {
                marker.stopMove();
            }
        </script>
EOF;
    } else {
        echo 'Key失效或请求失败';
    }
    ?>
</body>

</html>